<template>
  <commonDialog :model-value="modelValue" @close="cancel" @sure="save" :title="title" size="50%">
    <el-form ref="formRef" :model="request" :rules="rules" label-width="80px">
      <el-form-item prop="beginTime" label="填写时间">
        <el-date-picker format="YYYY-MM-DD"
                        v-model="request.fillDate" value-format="YYYY-MM-DD" type="date"
                        placeholder="请选择填写时间"/>
      </el-form-item>
      <el-form-item prop="originPassword" label="项目">
        <el-cascader :options="options" ref="casRef" :props="casProps" clearable v-model="request.projectNames"
                     placeholder="请选择项目"/>
      </el-form-item>
      <el-form-item prop="originPassword" label="日报内容">
        <markdown v-model="request.content"></markdown>
      </el-form-item>
    </el-form>
  </commonDialog>
</template>

<script>
import { propsConst } from '@/utils/propsConstant'
import { onBeforeMount, ref, toRefs } from 'vue'
import { post } from '@/utils/httpRequest'
import { addDailyUrl, queryDailyByIdUrl, queryProjectListTreeUrl, updateDailyByIdUrl } from '@/api/api'
import { ElMessage } from 'element-plus'

export default {
  name: 'dailyReportInfo',
  setup (props, { emit }) {
    const {
      type,
      id,
      title
    } = toRefs(props)
    const request = ref({
      fillDate: null,
      content: null,
      projectNames: []
    })
    const casRef = ref(null)
    const casProps = {
      value: 'label',
      checkStrictly: true
    }
    const cancel = () => {
      emit('update:modelValue', false)
    }
    const save = async () => {
      const tempRequest = Object.assign({}, request.value)
      tempRequest.projectNames = tempRequest.projectNames.join('/')
      let result
      switch (type.value) {
        // 新增
        case 1:
          result = await post(addDailyUrl, tempRequest)
          break
        // 编辑
        case 2:
          result = await post(updateDailyByIdUrl, tempRequest)
          break
      }
      if (result.code === 200) {
        ElMessage.success(`${title.value}成功！`)
        emit('save')
        cancel()
      }
    }
    const options = ref([])
    const queryProjectListTreeAsync = async () => {
      const result = await post(queryProjectListTreeUrl, {})
      if (result.code === 200) {
        options.value = result.data
      }
    }
    const queryDailyDetailAsync = async () => {
      const result = await post(queryDailyByIdUrl, { id: id.value })
      if (result.code === 200) {
        request.value = result.data
        request.value.projectNames = request.value.projectNames.split('/')
      }
    }
    const computedOperate = () => {
      switch (type.value) {
        // 新增
        case 1:
          break
        // 编辑
        case 2:
          queryDailyDetailAsync()
          break
      }
    }
    onBeforeMount(async () => {
      computedOperate()
      await queryProjectListTreeAsync()
    })
    return {
      casRef,
      casProps,
      save,
      cancel,
      request,
      options
    }
  },
  props: propsConst
}
</script>

<style scoped>

</style>
